import React,{useState, useEffect} from 'react'
import axios from 'axios';
export default function Fldetail(props) {
    let [ list,setList ] = useState([])
    let id = Number(props.match.params.id)
    useEffect( () => {
        axios.get('/api/mobile/classify').then((res) => {
            let allCats = res.data.data
            let arr = allCats.filter(item => item.classifyId === id)
            setList(arr)
        })
    },[id])
    console.log(list);
  return (
    <div>
      { list.length > 0 && <div>
        <div className='flbannerbox'>
        <img src={list[0].banner[0].image} alt="" className='flbanner' />
      </div>
      <div className='right111'>
        <ul>
          {
            list[0].second.map((item,index)=>{
              return <li className='flli' key={index}>
                <div className='fl'>
                  <h5>{item.classifyName}</h5>
                  {
                    item.third.map( (ass,index) => {
                      return <div  onClick={ () => props.history.push(`/detail/${item.third[0].spuList[0]}01`)} className='xbox' key={index}>
                        <div className='images'>
                          <img src={ass.image} alt="" />
                        <p className='fltext'>{ass.classifyName}</p>
                        </div>
                        
                      </div>
                    })
                  }
                </div>
              </li>
            })
          }
        </ul>
      </div>
        </div>
    }    
    </div>
  )
}
